<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="${pageContext.request.contextPath}/resources/echarts.min.js"></script>
<script src="${pageContext.request.contextPath}/resources/jquery-2.1.4.js"></script>
</head>
<body>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->	
    <div id="main" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
		$(function(){
			var myChart = echarts.init(document.getElementById('main'));
			$.post(
				'${pageContext.request.contextPath}/category/selectCategoryCount.action',
				function(jsonObj){
					console.log(jsonObj);
					var xArray = [];
					var yArray = new Array();
					$(jsonObj.data).each(function(){
						xArray.push(this.name);
						yArray.push(this.count);
					});
					var option = {
						    color: ['#3398DB'],
						    tooltip: {
						        trigger: 'axis',
						        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
						            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						        }
						    },
						    grid: {
						        left: '3%',
						        right: '4%',
						        bottom: '3%',
						        containLabel: true
						    },
						    xAxis: [
						        {
						            type: 'category',
						            data: xArray,
						            axisTick: {
						                alignWithLabel: true
						            }
						        }
						    ],
						    yAxis: [
						        {
						            type: 'value'
						        }
						    ],
						    series: [
						        {
						            name: '数量',
						            type: 'bar',
						            barWidth: '60%',
						            data: yArray
						        }
						    ]
						};
					// 使用刚指定的配置项和数据显示图表。
				    myChart.setOption(option);
				},
				'json'
			);		
		});
		
	
	</script>
</body>
</html>